<template>
  <div class="box">
    <p>组件通信高级</p>
    <div>
      <router-link tag="button" to="/props">1.props传值</router-link>
      <hr>
      <router-link tag="button" to="/event">2.自定义事件传值</router-link>
      <hr>
      <router-link tag="button" to="/model">3.model传值</router-link>
      <hr>
      <router-link tag="button" to="/sync">4. .sync传值</router-link>
      <hr>
      <router-link tag="button" to="/attrsListeners">5.  $attrs和$listeners传值</router-link>
      <hr>
      <router-link tag="button" to="/childrenRarent">6. $children&$parent传值</router-link>
      <hr>
      <router-link tag="button" to="/other">7. 作用域插槽传值</router-link>
      <hr>
      <router-link tag="button" to="/ref">8. $refs传值</router-link>
      <hr>
      <router-link tag="button" to="/root">9. $root传值</router-link>
      <hr>
      <router-link tag="button" to="/providerInject">10. provide传值</router-link>
      
    </div>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>

export default {

}
</script>

<style scoped>
.box{
  text-align: center;
}
</style>